<template>
<div id="cart">
  <nav-bar class="nav-bar">
    <div slot="center">
      购物车
      <span v-if="cartLength > 0">({{ cartLength }})</span>
      <!-- <span>{{sb}}</span> -->
    </div>
  </nav-bar>
  <cart-list :cartList="cartList" class="cartlist" ref="cartlist"></cart-list>
  <cart-bottom-bar class="bottom-bar"></cart-bottom-bar>
  </div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar.vue";
import { mapGetters } from "vuex";
import CartList from "./childComps/CartList.vue";
import CartBottomBar from './childComps/CartBottomBar.vue';
export default {
  components: { NavBar, CartList, CartBottomBar,},
  name: "Cart",
  computed: {
    // 演示一下mapgetters的作用 可以把getter转换成computed
    //  写法一
    ...mapGetters(["cartLength", "cartList"]),
    // 写法二
    ...mapGetters({
      // sb就是别名，cartLength是getter的名字
      sb: "cartLength"
    })
  },
  activated() {
   this.$refs.cartlist.scrollrefresh()
  }
  
};
</script>

<style scoped>
#cart{
  height: 100vh;
}
.nav-bar {
  background-color: var(--color-tint);
  color: #fff;
}

.cart-list {
  position: absolute;
  top: 44px;
  width: 100%;
}
.bottom-bar{
  position: absolute;
  bottom: 44px;
}
</style>
